<template>
  <div>
    <router-view></router-view>

    <div v-if="isShow">
      <van-tabbar
        v-model="active"
        @change="change"
        active-color="#ee0a24"
        inactive-color="#000"
        placeholder
        router
      >
        <van-tabbar-item icon="home-o" :to="{ name: 'moviehot' }"
          >电影</van-tabbar-item
        >
        <van-tabbar-item icon="search" :to="{ name: 'cinema' }"
          >影院</van-tabbar-item
        >
        <van-tabbar-item icon="friends-o" :to="{ name: 'content' }"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
    <backHomeComp></backHomeComp>
  </div>
</template>
<script setup>
//Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。
// Toast
// import { Toast } from 'vant'
// import 'vant/es/toast/style'
// import 'vant/es/dialog/style'
// import 'vant/es/notify/style'
// import 'vant/es/image-preview/style'

// Dialog
// import { Dialog } from 'vant'

// Notify
// import { Notify } from 'vant'

// ImagePreview
// import { ImagePreview } from 'vant'
import backHomeComp from '@/components/movieContent/backHomeContent/backHomeComp.vue'

import { useStore } from 'vuex'
import { computed, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
const store = useStore()
const isShow = computed(() => store.state.movieData.tabbar)
const active = computed(() => store.state.movieData.active)
const route = useRoute()
const change = (num) => {
  store.commit('movieData/activeUpdate', num)
  // console.log()
}
onMounted(() => {
  // store.commit('movieData/tabbarCut', true)
  console.log('index....')
  if (route.name === 'moviehot') {
    store.commit('movieData/activeUpdate', 0)
    // console.log(active)
  } else if (route.name === 'cinema') {
    store.commit('movieData/activeUpdate', 1)
  } else if (route.name === 'content') {
    store.commit('movieData/activeUpdate', 2)
  }
  // if (route.name === 'movielist' || route.name === 'moviehot') {
  //   store.commit('movieData/activeUpdate', 0)
  //   console.log(4)
  //   console.log(active)
  // } else if (
  //   route.name === 'cinema' ||
  //   route.name === 'cinemainfo' ||
  //   route.name === 'cinemafind'
  // ) {
  //   store.commit('movieData/activeUpdate', 1)
  //   console.log(5)
  // } else {
  //   store.commit('movieData/activeUpdate', 2)
  //   console.log(6)
  // }
  // store.commit('movieData/activeUpdate', 0)
})
onUnmounted(() => {
  console.log(111)
})
</script>
<!-- <script>
import { defineComponent } from 'vue'

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    // Do somethings
    console.log(from)
    // let go = from.path
    if (from.name !== 'movie') {
      console.log(3332)
    }
    next()
  }
})
</script> -->
<style lang="scss" scoped></style>
